<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <!-- 循环遍历数组 -->
    <ul>
      <li v-for="(item, index) in nameArr" v-bind:key="item.id">{{index}}--{{item.name}}</li>
    </ul>

    ------------------------------------
    <!-- 循环遍历对象 -->

    <p v-for="(value, key, index) in userObj" :key="key">{{key}} ---- {{value}} --- {{index}} </p>


    -------------------------------------
    <!-- 遍历字符串 -->

    <ul>
      <li v-for="(item, index) in str" :key="index">{{index}} ---- {{item}}</li>
    </ul>


    ------------------------------------
    <!-- 遍历数字 -->
    <!-- 要在v-for里循环遍历整数，可以直接将整数值传给v-for指令，例如：<span v-for="n in 10">{{ n }}</span>，这样会渲染一个span元素列表，列表中的每个元素都是1到10之间的整数。需要注意的是，这里的n的初值是从1开始而非0。 -->
    <ul>
      <li v-for="item in num" :key="item">{{item}}</li>
    </ul>


    <!-- 嵌套遍历 -->
    <!-- 先遍历外层, 数据解析再来一个对象,解析第二层时v-for写在ul而不是li -->
    <ul>
      <li v-for="item in boyArr" :key="item.id">
        <p>{{item.name}}</p>

        <ul v-for="v in item.children" :key="v.id">
          <li>{{v.name}}</li>
        </ul>
      </li>
    </ul>
  </div>
</body>
</html>

<script>

  const {createApp} = Vue;
  const vm = createApp({
    data(){
      return{
        message1:'Hello',
        nameArr:[
          {
            id:1,
            name:'阿里郎'
          },
          {
            id: 2,
            name:'大蘑菇'
          },
          {
            id:3,
            name:'陈奕迅'
          }
        ],
        userObj:{
          username:'黑旋风-李逵',
          age:40
        },
        str: 'aacdsnfjsiferf',
        num: 10,
        boyArr:[
          {
            id: 1,
            name:'郭德纲',
            children:[
              {
                id: 1,
                name: '郭麒麟'
              },
              {
                id:2,
                name:'郭汾阳'
              },
            ]
          },
          {
            id:2,
            name:'于谦',
            children:[
            {
              id:1,
              name:'岳云鹏',
            },
            {
              id:2,
              name:'孙越'
            }
            ]
          }
        ]

      }
    }
  }).mount('#app')
</script>
<script>



  /**
   * !v-for 一般结合key 属性使用
   * ! key属性作用: 是一个唯一索引, 用来标记该标签的唯一性
   * v-for是Vue.js中的一个指令，用于基于一个数组或对象来渲染一个列表。v-for的常用语法格式是item in items，其中items是源数据的数组或对象，而item是迭代项的别名。v-for指令还支持一个可选的第二个参数，参数值为当前项的索引，可以提供第二个参数为键名，第三个参数为索引。
   * 
   * 
   * 当进行虚拟dom进行比较的时候, 新的dom 和旧的虚拟dom 比较, 如果标签有key属性, 则可以 提高 比较效率
   * diff 算法 表示同层比较, 可以提高diff算法的比较效率
   * !虚拟 DOM（Virtual DOM）是一种轻量级的 JavaScript 对象，它描述了真实 DOM 中的节点信息和属性。虚拟 DOM 可以在内存中进行操作，然后通过算法比较新旧虚拟 DOM 的差异，最终只对发生变化的部分进行 DOM 操作，从而提高了性能。使用虚拟 DOM 的好处是可以避免频繁地操作真实 DOM，因为真实 DOM 操作非常昂贵，对性能有很大的影响。虚拟 DOM 可以将多个操作合并为一个批量操作，从而减少了操作次数，提高了性能。虚拟 DOM 还可以在各种平台上运行，比如浏览器、移动端、服务器端等，具有很好的跨平台性。

*!Virtual DOM 算法主要是实现上面步骤的三个函数：element，diff，patch。其中：

*!element：用于创建虚拟 DOM 对象，接受三个参数：tagName、props、children。tagName 表示节点名，props 表示节点属性，children 表示子节点。element 函数返回的是一个 VNode 对象，即虚拟 DOM 对象。
diff：用于比较新旧两个 VNode 对象的差异，生成一个补丁（Patch），接受两个参数：oldVnode、newVnode。diff 函数返回的是一个 Patch 对象，其中包含了需要更新的内容。
patch：用于将补丁（Patch）应用到真实 DOM 中，接受两个参数：el、patch。el 表示需要更新的真实 DOM 节点，patch 表示需要应用的补丁。patch 函数会根据 Patch 对象中的内容，对真实 DOM 进行更新。
在 Vue.js 中，每个组件都有自己的虚拟 DOM 对象，当组件的数据发生变化时，Vue.js 会重新生成这个组件的虚拟 DOM 对象，并与旧的虚拟 DOM 对象进行比较，找出需要更新的节点，并生成一个补丁（Patch），最后将这个补丁应用到真实的 DOM 中，完成更新操作。

*!在使用虚拟 DOM 进行开发时，通常的步骤如下：

构建虚拟 DOM：使用 element 函数构建虚拟 DOM 对象。
通过虚拟 DOM 构建真正的 DOM：使用 render 函数将虚拟 DOM 对象转换为真正的 DOM 节点。
生成新的虚拟 DOM：当组件的数据发生变化时，重新生成虚拟 DOM 对象。
比较两棵虚拟 DOM 树的不同：使用 diff 函数比较新旧两个虚拟 DOM 对象的差异，生成一个补丁（Patch）。
在真正的 DOM 元素上应用变更：使用 patch 函数将补丁（Patch）应用到真实的 DOM 中，完成更新操作。
虚拟 DOM 是前端开发中的重要概念，它可以提高开发效率，减少 DOM 操作，从而提高性能。虚拟 DOM 还可以跨平台运行，具有很好的适用性。
   *              
  */
</script>